<template>
  <div>
    <input v-model="data" type="text" />
    <div v-for="item in items" :key="item.id">
      {{ item }}
    </div>
    <div @click="handler(arg, event)"></div>
    <img :src="'/path/to/images/' + fileName" alt="altText" />
    <div :style="{ fontSize: data + 'px' }"></div>
    <div :style="[styleObjectA, styleObjectB]"></div>
    <div :class="{ className: data }"></div>
    <div :class="[classNameA, classNameB]"></div>
    <div :class="[classNameA, { classNameB: condition }]"></div>
    <transition mode="out-in" @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave" @leave="leave" :css="false">
    </transition>
  </div>
</template>

<script setup>
onMounted(() => {});
const name = reactive({
  count: 0,
});
const nam = ref(initialValue);
const a = ref(initialValue);
const b = computed(() => {
  return;
});
watch(
  () => foo,
  (newValue, oldValue) => {}
);
watchEffect(() => {});
const emit = defineEmits(["change", "update"]);
const props = defineProps({
  foo: String,
  bar: {
    type: Number,
    required: true,
  },
});
</script>

<style lang="scss" scoped></style>
